<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>天下行租车</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js.lxx.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <main class="c900 flex el-card" style="align-items: stretch">
        <div class="left">
            <h3>{{car.brand}}<small>{{car.model}}</small></h3>
            <el-carousel arrow="always">
                <el-carousel-item v-for=" i in car.images">
                    <img :src="i.path">
                </el-carousel-item>
            </el-carousel>
            <div class="flex" style="padding-block: 20px">
                <el-rate v-model="car.stars"></el-rate>
                <div class="price">￥{{car.price}}<small>元/天</small></div>
                <div class="intro" v-html="car.intro">
                </div>
            </div>
        </div>
        <div class="right">
            <h4 style="margin-left: 20px;margin-top: 68px">选择用车时间</h4>
            <el-calendar v-model="value">
                <template slot="dateCell" slot-scope="{date, data}">
                    <div style="height: 100%"
                         :style="{backgroundColor: cellBColor(data.day),
                                            color: cellColor(data.day, data.type)}">
                        <input type="checkbox" v-model="dates" :value="data.day" :id="data.day" style="display: none">
                        <label style="font-size: 0.7em" :for="data.day"> {{ data.day.split('-')[2] }}</label>
                    </div>
                </template>
            </el-calendar>
            <div class="flex">
                <div class="flex price" style="margin-left: 20px">
                    <small style="color: #0a68b1">合计:</small>￥{{money}}<small>元</small>
                </div>
                <a href="orders.html" class="abtn" @click.prevent="commit">现在预订</a>
            </div>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data: {
            value: new Date(),
            dates: [],
            rate: 4,
            car : {},
            // 未完成的订单日期
            unfinishDates : []
        },
        created(){
            let param = location.search;
            axios.get("FindCarServlet.s"+ param).then(
                res=> {
                    this.car = res.data;
                    this.car.leases.forEach(lease=>{
                        lease.days.split(/,+/).forEach(day=>{
                            this.unfinishDates.push(day);
                        })
                    })
                }
            );
        },
        computed:{
            money(){
                return this.car.price * this.dates.length  || 0;
            }
        },
        methods:{
            commit(){
                let param = new URLSearchParams();
                param.append("cid", this.car.id);
                param.append("days", this.dates.join(","));
                param.append("money", this.money);
                axios.post("CommitServlet.s", param).then(res=>{
                    if(res.data.code == 1){
                        location.href="orders.html";
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            },
            // 单元格背景色
            cellBColor(day){
                // includes ==> 包含
                if(this.unfinishDates.includes(day)){
                    return 'red';
                } else if(this.dates.includes(day)){
                    return '#09f';
                } else {
                    return '#fff'
                }
            },
            // 单元格字体色
            cellColor(day, type){
                // includes ==> 包含
                if(this.unfinishDates.includes(day)){
                    return 'blue';
                } else if(this.dates.includes(day)){
                    return '#fff';
                } else if(type=='current-month'){
                    return 'initial'; // 初始值
                } else {
                    return '#ddd'
                }
            }
        },
        watch:{
            dates(newValue, oldValue){
                newValue.forEach(day=>{
                    // 判断该日期是否被使用
                    if(this.unfinishDates.includes(day)){
                        // 过滤出已有日期
                        this.dates = this.dates.filter(d=>{return d!=day});
                        this.$alert("该日期已经被使用!");
                    }
                })
            }
        }
    })
</script>
</body>
</html>
